@extends('layout.home')

@section('title','我的收藏')

@section('content')
<style type="text/css">
	.collection-bar{
		height:80px;
		background:#eee;
	}
	.collection li{
		height:226px;
		width:150px;
		margin-right:23px;
		margin-bottom:14px;
		float:left;
		position:relative;
	}
	.pic img{
		width:150px;
		height:150px;
	}
	.title{
		height:20px;
		overflow: hidden;
    	text-overflow: ellipsis;
    	white-space: nowrap;
    	margin-top:10px;
    	margin-bottom:10px;
	}
	.title a{
		color:#222;
		text-decoration:none;
		font-size:14px;
   		/*font-family:"Microsoft YaHei","Microsoft JhengHei",SimSun,verdana,Tahoma,arial;*/
	}
	.price{
		text-align:center;
		color: #f40;
		font-size:14px;
		font-weight: 700;
   		/*font-family: verdana,arial;*/
	}
	.container{
		width:1236px;
	}
	.delete{
		position:absolute;
		right:0px;
		top:0px;
		display:none;
		/*background:black;*/
		opacity:0.7;
		/*color:#f40;*/
		/*width:25px;*/
		/*text-align:center;*/
	}
</style>
<div class="container">
	<div class="col-md-12 collection-bar">
		
	</div>
	
	<ul class="ul list-unstyled list-inline collection">
		@foreach($data as $k=>$v)
		<li gid="{{$v->goods_id}}">
			<div class="pic">
				<a href="/home/detail/{{$v->goods_id}}.html?goods_id={{$v->goods_id}}">
					<img src="{{$v->path}}" alt="">
				</a>
			</div>
			<div class="title">
				<a href="/home/detail/{{$v->goods_id}}.html?goods_id={{$v->goods_id}}">
				{{$v->title}}
				</a>
			</div>
			<div class="price">{{$v->price}}</div>
			<div class="delete" gid="{{$v->goods_id}}"><span class="glyphicon glyphicon-trash"></span></div>
		</li>
		@endforeach
	</ul>

	
</div>
<script type="text/javascript">
	var lis = $('li');
	lis.mouseover(function(){
		var gid = $(this).attr('gid');

		$(this).find('div[gid='+gid+']').css('display','block');
	});

	lis.mouseout(function(){
		var gid = $(this).attr('gid');
		//删除元素
		$(this).find('div[gid='+gid+']').css('display','none');
	});

	$('.delete').mouseover(function(){
		var gid = $(this).attr('gid');
		//样式
		$(this).css({'color':'#f40','cursor':'pointer'});
	});

	$('.delete').mouseout(function(){
		var gid = $(this).attr('gid');
		//样式
		$(this).css({'color':'#222','cursor':'pointer'});
	});

	$('.delete').click(function(){
		var gid = $(this).attr('gid');
		//删除
		var del = $(this);
		//1.发送ajax从表中删除
		$.get('/home/user/delcollection',{'id':gid},function(data){
			if(data == 1){
				//2.从页面删除
				del.parent().remove();
				alert('删除成功');
			}else{
				alert('删除失败');
			}
		})
		
	});

</script>
<div>
	
</div>
@endsection

@section('youpian')

@endsection